<template>
  <div class="_wz_hiddenDangerManagementDetails">
    <Card dis-hover :bordered="true">
      <div>
        <table cellpadding="0" cellspacing="0" border="0">
          <colgroup>
            <col width="12%" />
            <col width="21%" />
            <col width="12%" />
            <col width="21%" />
            <col width="12%" />
            <col width="21%" />
          </colgroup>
          <tbody>
          <tr>
            <td style="font-weight: 600;position:relative;" colspan="6">基本信息</td>
          </tr>
          <tr>
            <td style="text-align: center;">隐患排查</td>
            <td>{{!!formData.riskInspectItemName ? formData.riskInspectItemName : "--" }}</td>
            <td style="text-align: center;">完成状态</td>
            <td>
              <Tag color="error" type="dot" v-if="formData.riskInspectItemFinish == 0">未完成</Tag>
              <Tag color="primary" type="dot" v-if="formData.riskInspectItemFinish == 1">已完成</Tag>
            </td>
            <td style="text-align: center;">上报方式</td>
            <td>
              <Tag color="success" type="dot" v-if="formData.riskInspectItemType == 1">清单排查</Tag>
              <Tag color="primary" type="dot" v-if="formData.riskInspectItemType == 2">自查自纠</Tag>
            </td>
          </tr>
          <template v-if="formData.riskInspectItemType == 1">
            <tr>
              <td style="text-align: center;">隐患清单</td>
              <td>{{!!formData.riskPositionName ? formData.riskPositionName : "--" }}</td>
              <td style="text-align: center;">清单类型</td>
              <td>
                <Tag color="success" type="dot" v-if="formData.riskPositionType == 1">基础管理</Tag>
                <Tag color="primary" type="dot" v-if="formData.riskPositionType == 2">设备设施</Tag>
                <Tag color="warning" type="dot" v-if="formData.riskPositionType == 3">作业活动</Tag>
              </td>
              <td style="text-align: center;">隐患项目</td>
              <td>{{!!formData.riskPositionItemName ? formData.riskPositionItemName : "--"}}</td>
            </tr>
          </template>
          <tr>
            <td style="text-align: center;">经营企业</td>
            <td colspan="5">{{ !!formData.deptName ? formData.deptName : "--" }}</td>
          </tr>
          <template v-if="formData.riskInspectItemType == 1">
            <tr>
              <td style="text-align: center;">检查标准</td>
              <td colspan="5">{{!!formData.riskPositionItemCriterion ? formData.riskPositionItemCriterion : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">失控表现</td>
              <td colspan="5">{{!!formData.riskPositionItemPerformance ? formData.riskPositionItemPerformance : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">管控措施</td>
              <td colspan="5">{{!!formData.riskPositionItemMeasures ? formData.riskPositionItemMeasures : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">个人防护</td>
              <td colspan="5">{{!!formData.riskPositionItemProtect ? formData.riskPositionItemProtect : "--"}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">应急措施</td>
              <td colspan="5">{{!!formData.riskPositionItemBurst ? formData.riskPositionItemBurst : "--"}}</td>
            </tr>
          </template>
          <!--上报-->
          <template v-if="formData.riskInspectItemProcess > 0">
            <tr>
              <td style="font-weight: 600;position:relative;" colspan="6">隐患排查</td>
            </tr>
            <tr>
              <td style="text-align: center;">排查状态</td>
              <td>
                <Tag color="primary" v-if="formData.riskInspectItemState == 1">排查上报</Tag>
                <Tag color="error" v-else>未排查</Tag>
              </td>
              <td style="text-align: center;">隐患等级</td>
              <td>
                <Tag color="warning" v-if="formData.riskInspectItemLv == 1">一般隐患</Tag>
                <Tag color="error" v-else-if="formData.riskInspectItemLv == 2">重大隐患</Tag>
                <Tag color="primary" v-else>无隐患</Tag>
              </td>
              <td style="text-align: center;">排查时间</td>
              <td>{{!!formData.riskInspectItemTime ? formData.riskInspectItemTime : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">排查人员</td>
              <td>{{!!formData.riskInspectItemUserName ? formData.riskInspectItemUserName : "--" }}</td>
              <td style="text-align: center;">排查部门</td>
              <td colspan="3">{{!!formData.riskInspectItemInOrgName ? formData.riskInspectItemInOrgName : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">排查描述</td>
              <td colspan="5">{{!!formData.riskInspectItemContext ? formData.riskInspectItemContext : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">排查图片</td>
              <td colspan="3" style="padding: 10px;">
                <template v-if="!!formData.riskInspectItemImg">
                  <div style="width: 130px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="(item, index) in JSON.parse(formData.riskInspectItemImg)">
                    <div class="demo-upload-list" >
                      <Image :src="!!item ? apiUrl.imgUrl + item:'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!item ? apiUrl.imgUrl + item:'img/zwtpxd.png']" />
                    </div>
                  </div>
                </template>
              </td>
              <td style="text-align: center;">签字照片</td>
              <td>
                <div style="width: 80%;overflow: hidden;display:block;padding: 10px;margin: auto;" v-if="!!formData.riskInspectItemSign">
                  <div class="demo-upload-list" >
                    <Image :src="!!formData.riskInspectItemSign ? apiUrl.imgUrl + formData.riskInspectItemSign:'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.riskInspectItemSign ? apiUrl.imgUrl + formData.riskInspectItemSign:'img/zwtpxd.png']" />
                  </div>
                </div>
              </td>
            </tr>
          </template>

          <!--核查  && formData.riskInspectItemCheckState != -1-->
          <template v-if="formData.riskInspectItemProcess >= 1 && formData.riskInspectItemLv != 0">
            <tr>
              <td style="font-weight: 600;position:relative;" colspan="6">隐患核查</td>
            </tr>
            <tr>
              <td style="text-align: center;">核查状态</td>
              <td>
                <Tag color="primary" v-if="formData.riskInspectItemCheckState == 1">核查通过</Tag>
                <Tag color="error" v-else-if="formData.riskInspectItemCheckState == -1">核查退回</Tag>
                <Tag color="warning" v-else>等待核查</Tag>
              </td>
              <td style="text-align: center;">核查结果</td>
              <td>
                <Tag color="primary" v-if="formData.riskInspectItemCheckLv == 0">无隐患</Tag>
                <Tag color="warning" v-else-if="formData.riskInspectItemCheckLv == 1">一般隐患</Tag>
                <Tag color="error" v-else-if="formData.riskInspectItemCheckLv == 2">重大隐患</Tag>
                <Tag color="warning" v-else>等待核查</Tag>
              </td>
              <td style="text-align: center;">核查时间</td>
              <td>{{!!formData.riskInspectItemCheckTime ? formData.riskInspectItemCheckTime : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改方式</td>
              <td>
                <Tag color="primary" v-if="formData.riskInspectItemHandleType == 1">立即整改</Tag>
                <Tag color="warning" v-else-if="formData.riskInspectItemHandleType == 2">限期整改</Tag>
                <Tag color="error" v-else-if="formData.riskInspectItemHandleType == 3">停业整改</Tag>
              </td>
              <td style="text-align: center;">整改期限</td>
              <td colspan="3">{{!!formData.riskInspectItemHandleDate ? formData.riskInspectItemHandleDate : "--"}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">核查人员</td>
              <td>{{!!formData.riskInspectItemCheckUserName ? formData.riskInspectItemCheckUserName : "--" }}</td>
              <td style="text-align: center;">核查部门</td>
              <td colspan="3">{{!!formData.riskInspectItemCheckInOrgName ? formData.riskInspectItemCheckInOrgName : "--"}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">核查描述</td>
              <td colspan="5">{{!!formData.riskInspectItemCheckContext? formData.riskInspectItemCheckContext : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改措施</td>
              <td colspan="5">{{!!formData.riskInspectItemCheckMeasures? formData.riskInspectItemCheckMeasures : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">核查意见</td>
              <td colspan="5">{{!!formData.riskInspectItemCheckOpinion? formData.riskInspectItemCheckOpinion : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">核查图片</td>
              <td colspan="3" style="padding: 10px;">
                <template v-if="!!formData.riskInspectItemCheckImg">
                  <div style="width: 130px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="(item, index) in JSON.parse(formData.riskInspectItemCheckImg)" >
                    <div class="demo-upload-list" >
                      <Image :src="!!item ? apiUrl.imgUrl + item:'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!item ? apiUrl.imgUrl + item:'img/zwtpxd.png']" />
                    </div>
                  </div>
                </template>
              </td>
              <td style="text-align: center;">签字照片</td>
              <td>
                <div style="width: 80%;overflow: hidden;display:block;padding: 10px;margin: auto;" v-if="!!formData.riskInspectItemCheckSign">
                  <div class="demo-upload-list" >
                    <Image :src="!!formData.riskInspectItemCheckSign ? apiUrl.imgUrl + formData.riskInspectItemCheckSign:'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.riskInspectItemCheckSign ? apiUrl.imgUrl + formData.riskInspectItemCheckSign:'img/zwtpxd.png']" />
                  </div>
                </div>
              </td>
            </tr>
          </template>

          <!--整改  && formData.riskInspectItemHandleState != -1-->
          <template
              v-if=" formData.riskInspectItemProcess >= 2 && formData.riskInspectItemCheckState != -1 && formData.riskInspectItemCheckLv != 0">
            <tr>
              <td style="font-weight: 600;position:relative;" colspan="6">隐患整改</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改状态</td>
              <td>
                <Tag color="primary" v-if="formData.riskInspectItemHandleState == 1">整改通过</Tag>
                <Tag color="error" v-else-if="formData.riskInspectItemHandleState == -1">整改退回</Tag>
                <Tag color="warning" v-else>等待整改</Tag>
              </td>
              <td style="text-align: center;">整改资金</td>
              <td>{{!!formData.riskInspectItemHandlePrice? formData.riskInspectItemHandlePrice : "--" }}</td>
              <td style="text-align: center;">整改时间</td>
              <td>{{!!formData.riskInspectItemHandleTime? formData.riskInspectItemHandleTime : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改人员</td>
              <td>{{!!formData.riskInspectItemHandleUserName? formData.riskInspectItemHandleUserName : "--" }}</td>
              <td style="text-align: center;">整改部门</td>
              <td colspan="3">{{!!formData.riskInspectItemHandleInOrgName? formData.riskInspectItemHandleInOrgName : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改描述</td>
              <td colspan="5">{{!!formData.riskInspectItemHandleContext? formData.riskInspectItemHandleContext : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改措施</td>
              <td colspan="5">{{!!formData.riskInspectItemHandleMeasures? formData.riskInspectItemHandleMeasures : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改情况</td>
              <td colspan="5">{{!!formData.riskInspectItemHandleSituation? formData.riskInspectItemHandleSituation : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改图片</td>
              <td colspan="3" style="padding: 10px;">
                <template v-if="!!formData.riskInspectItemHandleImg">
                  <div style="width: 130px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="(item, index) in JSON.parse(formData.riskInspectItemHandleImg)">
                    <div class="demo-upload-list" >
                      <Image :src="!!item ? apiUrl.imgUrl + item:'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!item ? apiUrl.imgUrl + item:'img/zwtpxd.png']" />
                    </div>

                  </div>
                </template>
              </td>
              <td style="text-align: center;">签字照片</td>
              <td>
                <div style="width: 80%;overflow: hidden;display:block;padding: 10px;margin: auto;"  v-if="!!formData.riskInspectItemHandleSign">
                  <div class="demo-upload-list" >
                    <Image :src="!!formData.riskInspectItemHandleSign ? apiUrl.imgUrl + formData.riskInspectItemHandleSign:'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.riskInspectItemHandleSign ? apiUrl.imgUrl + formData.riskInspectItemHandleSign:'img/zwtpxd.png']" />
                  </div>
                </div>
              </td>
            </tr>
          </template>

          <!--验收  && formData.riskInspectItemReviewState != -1-->
          <template v-if=" formData.riskInspectItemProcess >= 3 && formData.riskInspectItemHandleState != -1">
            <tr>
              <td style="font-weight: 600;position:relative;" colspan="6">隐患验收</td>
            </tr>
            <tr>
              <td style="text-align: center;">验收状态</td>
              <td>
                <Tag color="primary"  v-if="formData.riskInspectItemReviewState == 1">验收通过</Tag>
                <Tag color="error" v-else-if="formData.riskInspectItemReviewState == -1">验收退回</Tag>
                <Tag color="warning" v-else>等待验收</Tag>
              </td>
              <td style="text-align: center;">验收结果</td>
              <td>
                <Tag color="primary"  v-if="formData.riskInspectItemReviewResult == 1">通过</Tag>
                <Tag color="error" v-else-if="formData.riskInspectItemReviewResult == 0">不通过</Tag>
              </td>
              <td style="text-align: center;">验收时间</td>
              <td>{{!!formData.riskInspectItemReviewTime? formData.riskInspectItemReviewTime : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">验收人</td>
              <td>{{!!formData.riskInspectItemReviewUserName? formData.riskInspectItemReviewUserName : "--" }}</td>
              <td style="text-align: center;">验收部门</td>
              <td colspan="3">{{!!formData.riskInspectItemReviewInOrgName? formData.riskInspectItemReviewInOrgName : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">验收描述</td>
              <td colspan="5">{{!!formData.riskInspectItemReviewContext? formData.riskInspectItemReviewContext : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">验收意见</td>
              <td colspan="5">{{!!formData.riskInspectItemReviewOpinion? formData.riskInspectItemReviewOpinion : "--" }}</td>
            </tr>
            <tr>
              <td style="text-align: center;">验收图片</td>
              <td colspan="3" style="padding: 10px;">
                <template v-if="!!formData.riskInspectItemReviewImg">
                  <div style="width: 130px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="(item, index) in JSON.parse(formData.riskInspectItemReviewImg)">

                    <div class="demo-upload-list" >
                      <Image :src="!!item ? apiUrl.imgUrl + item:'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!item ? apiUrl.imgUrl + item:'img/zwtpxd.png']" />
                    </div>
                  </div>
                </template>
              </td>
              <td style="text-align: center;">签字照片</td>
              <td>
                <div style="width: 80%;overflow: hidden;display:block;padding: 10px;margin: auto;"  v-if="!!formData.riskInspectItemReviewSign">

                  <div class="demo-upload-list" >
                    <Image :src="!!formData.riskInspectItemReviewSign ? apiUrl.imgUrl + formData.riskInspectItemReviewSign:'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.riskInspectItemReviewSign ? apiUrl.imgUrl + formData.riskInspectItemReviewSign:'img/zwtpxd.png']" />
                  </div>

                </div>
              </td>
            </tr>
          </template>
          </tbody>
        </table>
      </div>
    </Card>
  </div>
</template>
<script>


import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  toRefs,
  toRef,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  defineComponent,
  toRaw,
  watch,
  resolveComponent
} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import wzTbale from "../../../components/table/index.vue";
//reactive
export default defineComponent({
  name: 'hiddenDangerManagementDetails',//组件名称
  components: {
    wzTbale,
  },//组件引用
  props: ['selectData'],//接收来自父组件的数据
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      formData: {},

    });




    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      state.formData = props.selectData
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      apiUrl,
    }
  }
})


</script>
<style lang="less">

._wz_hiddenDangerManagementDetails {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;

  table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px !important;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border: 1px solid #515a6e;
      padding: 0 10px;
      word-break: break-word;
    }

    .demo-upload-list {
      margin: 5px auto;
      width: 100%;
      max-width: 200px;
      height: 140px;
      text-align: center;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;

      img {
        min-height: 30%;
        max-height: 90%;
        min-width: 30%;
        max-width: 90%;
        //width: 100%;
        //height: 100%;
      }
    }
  }
}
</style>
